// 保存的公交车中 墙的效果
import React, { useState, useEffect, useContext } from "react";
import { getRealData, getBusHistory, getAlarm, getStation, getBeforeData, getElecHistory } from "../api";
import { RootContext } from "../reduce/context";
import { message, Spin } from 'antd';
import AlarmPopus from "../popus/alarm";
import DetailPopus from "../popus/detail";
import wgs84togcj02 from "../utils/transfer";
import TimeBar from "../trafficTool/timeBar";
import '../utils/dataformat';
import './index.css';

import busImg from '../image/bus.png';
import posImg from '../image/pos.png';
import alarm from '../image/alarm.gif';
import stationImg from '../image/busStation.png';
import mass0 from '../image/mass0.png'
import mass1 from '../image/mass1.png'
import mass2 from '../image/mass2.png'
import mass3 from '../image/mass3.png'
import mass4 from '../image/mass4.png'
import mass5 from '../image/mass5.png'

let timer, alarmTimer;
let currIndex = 0;
let pathIndex = [];
const busMonitor = () => {
    const { state, dispatch } = useContext(RootContext);
    const {
        selectTab,
        // 公交车参数
        busTraceType,
        busPollutantId,
        busPollutant,
        // 电动车参数
        elecTraceType,
        elecPollutantId,
        elecPollutant,
        microdevCode,
        isShowAlarmPopus,
        isShowAlarm,
        alarmPollutant,
        alarmInfo,
        timeType,
        hSTime,
        hETime,
        hMicrodevCode,
        bus,
        isShowHistory,
        isShowReal,
        isShowStation,
    } = state;
    const alarmIcon = new AMap.Icon({
        image: alarm,
        imageSize: new AMap.Size(30, 30)
    });
    const stationIcon = new AMap.Icon({
        image: stationImg,
        imageSize: new AMap.Size(20, 20)
    });
    const busIcon = new AMap.Icon({
        image: busImg,
        imageSize: new AMap.Size(44, 26),
        size: new AMap.Size(88, 52)
    });
    const posIcon = new AMap.Icon({
        image: posImg,
        imageSize: new AMap.Size(32, 32),
        size: new AMap.Size(32, 32)
    });
    const massIcon0 = new AMap.Icon({
        image: mass0,
        imageSize: new AMap.Size(24, 24),
        size: new AMap.Size(26, 26)
    })
    const massIcon1 = new AMap.Icon({
        image: mass1,
        imageSize: new AMap.Size(24, 24),
        size: new AMap.Size(26, 26)
    })
    const massIcon2 = new AMap.Icon({
        image: mass2,
        imageSize: new AMap.Size(24, 24),
        size: new AMap.Size(26, 26)
    })
    const massIcon3 = new AMap.Icon({
        image: mass3,
        imageSize: new AMap.Size(24, 24),
        size: new AMap.Size(26, 26)
    })
    const massIcon4 = new AMap.Icon({
        image: mass4,
        imageSize: new AMap.Size(24, 24),
        size: new AMap.Size(26, 26)
    })
    const massIcon5 = new AMap.Icon({
        image: mass5,
        imageSize: new AMap.Size(24, 24),
        size: new AMap.Size(26, 26)
    })
    // 海量点样式
    const style = [
        {
            url: mass0,
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(16, 16)
        }, {
            url: mass1,
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(16, 16)
        }, {
            url: mass2,
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(16, 16)
        }, {
            url: mass3,
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(16, 16)
        }, {
            url: mass4,
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(16, 16)
        }, {
            url: mass5,
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(16, 16)
        },
    ];
    const icons = [
        {
            type: 'image',
            image: mass0,
            size: [30, 30],
            anchor: 'center',
        }, {
            type: 'image',
            image: mass1,
            size: [30, 30],
            anchor: 'center',
        }, {
            type: 'image',
            image: mass2,
            size: [30, 30],
            anchor: 'center',
        }, {
            type: 'image',
            image: mass3,
            size: [30, 30],
            anchor: 'center',
        }, {
            type: 'image',
            image: mass4,
            size: [30, 30],
            anchor: 'center',
        }, {
            type: 'image',
            image: mass5,
            size: [30, 30],
            anchor: 'center',
        }
    ];
    const textStyle = {
        fontSize: 12,
        fontWeight: 'bold',
        fillColor: '#000',
    };
    const [map, setMap] = useState(); // 地图
    const [realPath, setRealPath] = useState([]);  // 实时路线数据
    const [historyPath, setHistoryPath] = useState([]);  // 历史路线数据
    const [movePath, setMovePath] = useState([]); // 实时移动路线数据
    const [barSite, setBarSite] = useState([]); // 报警数据
    const [newBar, setNewBar] = useState([]); // 实时报警 - 报警柱子
    const [carSite, setCarSite] = useState([]); // 小车
    const [layer, setLayer] = useState([]); // 柱子图层

    const [massMarker, setMassMarker] = useState(); // 海量点覆盖物
    const [pointSet, setPointSet] = useState([]); // 海量点集合
    const [elecMassMarker, setElecMassMarker] = useState(); // 电动车历史海量点覆盖物
    const [elecPoint, setElecPoint] = useState(); // 电动车历史海量点集合
    const [labelsLayer, setLabelsLayer] = useState(); // 海量点+文本标注图层
    const [labelPoint, setLabelPoint] = useState(); // 海量点
    const [hisElecLayer, setHisElecLayer] = useState(); // 电动车历史海量点+文本标注图层
    const [hisElecPoint, setHisElecPoint] = useState(); // 电动车历史海量点
    const [hisBusLayer, setHisBusLayer] = useState(); // 公交车历史海量点+文本标注图层
    const [hisBusPoint, setHisBusPoint] = useState(); // 公交车历史海量点

    const [realMarkers, setRealMarkers] = useState([]); // 实时路线覆盖物
    const [historyMarker, setHistoryMarker] = useState([]); // 历史路线覆盖物
    const [alarmMarker, setAlarmMarker] = useState([]); // 报警覆盖物
    const [stationMarkers, setStationMarkers] = useState([]); // 站牌覆盖物
    const [text, setText] = useState([]); // 站点文字覆盖物
    const [startTime, setStartTime] = useState(new Date().format('yyyy-MM-dd 00:00:00'));
    const [endTime, setEndTime] = useState(new Date().format('yyyy-MM-dd hh:mm:ss'));
    const [realFlag, setRealFlag] = useState(false);
    const [alarmFlag, setAlarmFlag] = useState(false);
    const [station, setStation] = useState([]);
    const [isShowDetail, setIsShowDetail] = useState(false);
    const [detailType, setDetailType] = useState();
    const [detail, setDetail] = useState({});
    const [load, setLoad] = useState(false);
    const [isClickTimeBar, setIsClickTimeBar] = useState(0);
    const [tbETime, setTbETime] = useState('');
    const [fresh, setFresh] = useState(0);
    const [emptyCar, setEmptyCar] = useState([]);
    const [carPosition, setCarPosition] = useState([]);
    const [selectModel, setSelectModel] = useState(0);

    // 测试
    const [object3Dlayer, setObject3Dlayer] = useState();
    const [wall, setWall] = useState([]);

    // 获取数据
    const getData = () => {
        setLoad(true);
        if (!busTraceType && selectTab == 'bus' || !elecTraceType && selectTab == 'elec') {
            getCurData();
        } else if (busTraceType && selectTab == 'bus' || elecTraceType && selectTab == 'elec') {
            if (selectTab == 'bus') {
                getBusHistoryData();
            } else {
                getElecHistoryData();
            }
        }
    }
    // 获取20分钟之前的数据
    const getPreData = () => {
        let sTime = isClickTimeBar ? new Date(tbETime).addHour(-6, 'yyyy-MM-dd hh:00:00') : new Date().format('yyyy-MM-dd 00:00:00');
        let eTime = isClickTimeBar ? new Date(tbETime).format('yyyy-MM-dd hh:00:00') : new Date().addMinutes(-20, 'yyyy-MM-dd hh:mm:ss');
        // let pollu = selectTab == 'bus' ? (busPollutant == 'PM2.5' ? 'PM25' : busPollutant) : (elecPollutant == 'PM2.5' ? 'PM25' : elecPollutant)
        let pollu = 'PM10'
        getBeforeData({
            deviceCode: microdevCode,
            polluName: pollu,
            startTime: sTime,
            endTime: eTime
        }).then(res => {
            let data = res.data.result;
            let points = [];
            let labels = [];
            let carPos = [];

            // 测试
            let walll = [];
            let val = [];
            let colors = [];

            if (res.data.code != -1) {
                data.map((item, index) => {
                    if (item.value.length) {
                        item.value.map(iitem => {
                            points.push({
                                microdevCode: item.microdevCode,
                                lnglat: wgs84togcj02(iitem.longitude, iitem.latitude),
                                value: iitem.value,
                                time: iitem.time,
                                style: handleStyleNum(iitem.value)
                            })
                        })

                        item.value.map(iitem => {
                            let massIcon = iitem.value < 35 ? icons[0] : iitem.value < 75 ? icons[1] : iitem.value < 115 ? icons[2] : iitem.value < 150 ? icons[3] : iitem.value < 250 ? icons[4] : icons[5];
                            // let value = iitem.value.toString();
                            let label = new AMap.LabelMarker({
                                name: item.microdevCode,
                                position: wgs84togcj02(iitem.longitude, iitem.latitude),
                                icon: massIcon,
                                text: {
                                    // content: value,
                                    style: textStyle,
                                    offset: [0, 25],
                                },
                                extData: {
                                    microdevCode: item.microdevCode,
                                    pos: wgs84togcj02(iitem.longitude, iitem.latitude),
                                    value: iitem.value,
                                    time: iitem.time,
                                },
                            })

                            label.on('click', showCirclePopus);
                            labels.push(label);
                        })

                        if (pathIndex.indexOf(index) > -1 && !isClickTimeBar) {
                            let val = item.value[0];
                            carPos.push({
                                microdevCode: item.microdevCode,
                                pos: [val.longitude, val.latitude]
                            });
                        }
                    }

                    // 测试
                    if (item.value.length) {
                        item.value.map(iitem => {
                            let color = iitem.value < 35 ? '#00e600' : iitem.value < 75 ? '#ffff00' : iitem.value < 115 ? '#ff7f00' : iitem.value < 150 ? '#ff0000' : iitem.value < 250 ? '#9a004a' : '#800021';
                            walll.push(wgs84togcj02(iitem.longitude, iitem.latitude));
                            val.push(iitem.value);
                            colors.push(color)
                        })
                    }
                })
                setEmptyCar(carPos);
                setPointSet(points);
                setLabelPoint(labels)

                // 测试
                setWall({
                    path: walll,
                    value: val,
                    color: colors
                })

            } else {
                if (pathIndex.length) {
                    message.warning({
                        content: '暂无数据',
                        duration: 2
                    });
                }
            }
        })
    }
    // 获取实时数据
    const getCurData = () => {
        pathIndex = [];
        let token = 'qiYrxXEv5mJPW6-dU5_wQapBuIuaxNGmuzeRT1N5Jgegq5QaVzhzBHYJmSsiOvolgO1mJAUrCt0u6V65yKVfxlugtNcEk_DyoM5XW0CUuJfRM2PtKvEpBAaJ7vF04F6nIGs-E3cgU607azzZscr1RK-yz3yWaLSgg5lTvgrSx1BFR3OYrru-3KsgXBxHQ1ZnDkklbdLQ4eoP7FFwQH0uiIftUqiVRE-0fzMherrCXEuUOwltubFKNhh0qwW0-mS4';
        getRealData({
            token: token,
            type: 0,
            pollutant_id: selectTab == 'bus' ? busPollutantId : elecPollutantId,
            microdev_code: microdevCode,
            start_time: new Date().addMinutes(-20, 'yyyy-MM-dd hh:mm:ss'),
            end_time: endTime,
        }).then(res => {
            let data = res.data.result;
            let path = [];
            let indexs = [];
            data.map((item, index) => {
                if (item.value.length) {
                    // 点数据
                    path.push({
                        microdevCode: item.microdevCode,
                        path: item.value.map(iitem => {
                            return wgs84togcj02(iitem.longitude, iitem.latitude);
                        }),
                        value: item.value.map(iitem => {
                            return iitem.value;
                        }),
                        time: item.value.map(iitem => {
                            return iitem.time;
                        }),
                        style: item.value.map(iitem => {
                            return handleStyleNum(iitem.value);
                        })
                    });
                } else if (!isClickTimeBar) {
                    indexs.push(index);
                }
            })
            pathIndex = indexs;
            setRealPath(path);
            setRealFlag(!realFlag);
            setLoad(false)
        })
    }
    // 获取公交车历史数据
    const getBusHistoryData = () => {
        getBusHistory({
            type: isClickTimeBar ? 'h' : timeType,
            startTime: isClickTimeBar ? new Date(tbETime).addHour(-6, 'yyyy-MM-dd hh:00:00') : hSTime,
            endTime: isClickTimeBar ? new Date(tbETime).format('yyyy-MM-dd hh:00:00') : hETime,
            polluName: busPollutant == 'PM2.5' ? 'PM25' : busPollutant,
            bus: bus,
            deviceCode: hMicrodevCode
        }).then(res => {
            let data = res.data.result.data;
            let path = [];
            let hisLabel = [];
            if (data.length) {
                data.map(item => {
                    // 历史路线数据
                    if (item.value.length) {
                        path.push({
                            microdevCode: item.microdevCode,
                            path: item.value.map(iitem => {
                                return [iitem.lon, iitem.lat]
                            }),
                            value: item.value.map(iitem => {
                                return iitem.value
                            })
                        });

                        item.value.map(iitem => {
                            let massIcon = iitem.value < 35 ? icons[0] : iitem.value < 75 ? icons[1] : iitem.value < 115 ? icons[2] : iitem.value < 150 ? icons[3] : iitem.value < 250 ? icons[4] : icons[5];
                            let value = iitem.value.toFixed(0).toString();
                            let label = new AMap.LabelMarker({
                                name: item.microdevCode,
                                position: [iitem.lon, iitem.lat],
                                icon: massIcon,
                                text: {
                                    content: value,
                                    style: textStyle,
                                    offset: [0, 25],
                                },
                                extData: {
                                    microdevCode: item.microdevCode,
                                    lnglat: [iitem.lon, iitem.lat],
                                    value: value,
                                },
                            })
                            label.on('click', showPointline);
                            hisLabel.push(label);
                        })
                    }
                })
                setHistoryPath(path);
                setHisBusPoint(hisLabel);
            } else {
                message.warning({
                    content: '暂无数据',
                    duration: 2
                });
            }
            setLoad(false)
        })
    }
    // 获取电动车历史数据
    const getElecHistoryData = () => {
        let params = {
            type: isClickTimeBar ? 'h' : timeType,
            startTime: isClickTimeBar ? new Date(tbETime).addHour(-6, 'yyyy-MM-dd hh:00:00') : hSTime,
            endTime: isClickTimeBar ? new Date(tbETime).format('yyyy-MM-dd hh:00:00') : hETime,
            deviceCode: hMicrodevCode,
            polluName: elecPollutant
        }
        getElecHistory(params).then(res => {
            let data = res.data.result;
            let points = [];
            let hisLabel = [];
            if (res.data.code != -1) {
                data.map(item => {
                    if (item.value.length) {
                        item.value.map(iitem => {
                            let massIcon = iitem.value < 35 ? icons[0] : iitem.value < 75 ? icons[1] : iitem.value < 115 ? icons[2] : iitem.value < 150 ? icons[3] : iitem.value < 250 ? icons[4] : icons[5];
                            let value = iitem.value.toString();

                            points.push({
                                microdevCode: item.microdevCode,
                                lnglat: wgs84togcj02(iitem.lon_wgs84, iitem.lat_wgs84),
                                value: iitem.value,
                                time: iitem.time,
                                style: handleStyleNum(iitem.value)
                            })

                            let label = new AMap.LabelMarker({
                                name: item.microdevCode,
                                position: wgs84togcj02(iitem.lon_wgs84, iitem.lat_wgs84),
                                icon: massIcon,
                                text: {
                                    content: value,
                                    style: textStyle,
                                    offset: [0, 25],
                                },
                                extData: {
                                    microdevCode: item.microdevCode,
                                    lnglat: wgs84togcj02(iitem.lon_wgs84, iitem.lat_wgs84),
                                    value: iitem.value,
                                    time: iitem.time,
                                },
                            })
                            label.on('click', showHisCirclePopus);
                            hisLabel.push(label);
                        })


                    }
                })
                setElecPoint(points);
                setHisElecPoint(hisLabel);
            } else {
                message.warning('暂无数据！');
            }

        })
    }
    // 获取公交站点数据
    const getBusStation = () => {
        if (isShowStation && selectTab == 'bus') {
            setLoad(true)
            let all = '30,67,6,303,303,56,12,11,11,18'
            getStation({
                bus: !bus.length ? all : bus,
                deviceCode: microdevCode
            }).then(res => {
                let data = res.data.result;
                let stations = [];
                let hisStations = [];
                data.map(item => {
                    item.value.map(iitem => {
                        stations.push({
                            microdevCode: item.microdevCode,
                            pos: [iitem.lon_gcj02, iitem.lat_gcj02],
                            name: iitem.name,
                            staName: iitem.staName
                        })
                        hisStations.push({
                            microdevCode: item.microdevCode,
                            pos: [iitem.lon_gcj02, iitem.lat_gcj02],
                            name: iitem.name,
                            staName: iitem.staName
                        })
                    })
                });
                if (busTraceType) {
                    setStation(hisStations);
                } else {
                    setStation(stations);
                }
            })
        }
    }
    // 获取报警数据
    const getAlarmData = () => {
        if (isShowAlarm) {
            setLoad(true);
            let option = busTraceType == 1 ?
                {
                    polluName: alarmPollutant,
                    deviceCode: hMicrodevCode,
                    type: timeType,
                    startTime: isClickTimeBar ? new Date(tbETime).addHour(-6, 'yyyy-MM-dd hh:00:00') : hSTime,
                    endTime: isClickTimeBar ? new Date(tbETime).format('yyyy-MM-dd hh:00:00') : hETime
                } : {
                    polluName: alarmPollutant,
                    deviceCode: microdevCode,
                    type: 'h',
                    startTime: isClickTimeBar ? new Date(tbETime).addHour(-6, 'yyyy-MM-dd hh:00:00') : startTime,
                    endTime: isClickTimeBar ? new Date(tbETime).format('yyyy-MM-dd hh:00:00') : endTime
                };
            getAlarm(option).then(res => {
                let data = res.data.result;
                let barSites = [];
                // real
                if (res.data.code != -1) {
                    data.map(item => {
                        if (item.value.length) {
                            item.value.map(iitem => {
                                barSites.push({
                                    coord: iitem.lon_gcj02 + ',' + iitem.lat_gcj02,
                                    microdevCode: iitem.deviceCode,
                                    name: iitem.name,
                                    longitude: iitem.lon_gcj02,
                                    latitude: iitem.lat_gcj02,
                                    time: iitem.alarmTime,
                                    polluName: iitem.polluName,
                                    value: iitem.value
                                })
                            })
                        } else {
                            setLoad(false)
                        }
                    })
                } else {
                    message.warning({
                        content: '暂无报警',
                        duration: 2
                    });
                    setLoad(false);
                }
                setBarSite(barSites);
                setAlarmFlag(!alarmFlag);
            })
        }
    }
    // 获取实时移动路线数据
    const getIntervalData = () => {
        let time = new Date();
        getRealData({
            token:
                'qiYrxXEv5mJPW6-dU5_wQapBuIuaxNGmuzeRT1N5Jgegq5QaVzhzBHYJmSsiOvolgO1mJAUrCt0u6V65yKVfxlugtNcEk_DyoM5XW0CUuJfRM2PtKvEpBAaJ7vF04F6nIGs-E3cgU607azzZscr1RK-yz3yWaLSgg5lTvgrSx1BFR3OYrru-3KsgXBxHQ1ZnDkklbdLQ4eoP7FFwQH0uiIftUqiVRE-0fzMherrCXEuUOwltubFKNhh0qwW0-mS4',
            type: 0,
            pollutant_id: busPollutantId,
            microdev_code: microdevCode,
            start_time: new Date(time).addMinutes(-1, 'yyyy-MM-dd hh:mm:ss'),
            end_time: new Date().format('yyyy-MM-dd hh:mm:ss'),
        }).then(res => {
            let data = res.data.result;
            let newPath = [];
            data.map(item => {
                newPath.push({
                    microdevCode: item.microdevCode,
                    path: item.value.map(iitem => {
                        return [iitem.longitude, iitem.latitude];
                    }),
                    value: item.value.map(iitem => {
                        return iitem.value;
                    }),
                    time: item.value.map(iitem => {
                        return iitem.time;
                    }),
                });
            })
            setMovePath(newPath);
        })
    }
    // 获取实时报警数据
    const getIntervalAlarmData = () => {
        if (isShowAlarm) {
            let time = new Date();
            let option = {
                polluName: alarmPollutant,
                deviceCode: microdevCode,
                type: 'h',
                startTime: new Date(time).addMinutes(-10, 'yyyy-MM-dd hh:mm:ss'),
                endTime: new Date().format('yyyy-MM-dd hh:mm:ss')
            };
            getAlarm(option).then(res => {
                let data = res.data.result;
                let barSites = [];
                data.map(item => {
                    item.value.map(iitem => {
                        barSites.push({
                            coord: iitem.lon_gcj02 + ',' + iitem.lat_gcj02,
                            microdevCode: iitem.deviceCode,
                            name: iitem.name,
                            longitude: iitem.lon_gcj02,
                            latitude: iitem.lat_gcj02,
                            time: iitem.alarmTime,
                            polluName: iitem.polluName,
                            value: iitem.value
                        })
                    })
                })
                setNewBar(barSites);
            })
        }
    }

    // 绘制基本地图
    const initMap = () => {
        setMap(new AMap.Map('map', {
            center: [118.752068, 32.05829],
            pitch: 55,
            maxPitch: 55,
            viewMode: '3D',   //使用3D视图
            mapStyle: "amap://styles/grey",
            zoom: 13.99,
            skyColor: '#1a232c',
            layers: [new AMap.TileLayer.Satellite()],
        }))

        // 测试
        setObject3Dlayer(new AMap.Object3DLayer({ zIndex: 1000 }))
    }
    // 绘制鼓楼边界
    const drawBoundry = () => {
        AMap.plugin('AMap.DistrictSearch', () => {
            let districtSearch = new AMap.DistrictSearch({
                subdistrict: 1,   //返回下一级行政区
                showbiz: false,  //最后一级返回街道信息
                extensions: 'all',  //返回行政区边界坐标组等具体信息，设置该属性才可以绘制区域
            })
            // 搜索鼓楼区信息
            districtSearch.search('320106', (status, result) => {
                // 查询成功的时候，result即为对应的行政区信息
                let polyline = new AMap.Polyline({
                    map: map,
                    path: result.districtList[0].boundaries[0],
                    strokeColor: '#196de0', // 线颜色
                    strokeWeight: 2, // 线宽
                    lineJoin: "round",
                    lineCap: 'round',
                    zIndex: 88
                })
            })
        })
    }
    // 绘制 彩虹图 + 车
    const drawRealRainbow = () => {
        if (!busTraceType) {
            setRealFlag(!realFlag);
        }
        if (realPath.length) {
            setLoad(true)
            let cars = [];
            let marker = realMarkers;
            realPath.map(item => {
                item.path.map((iitem, iindex) => {
                    let massIcon = item.value[iindex] < 35 ? massIcon0 : item.value[iindex] < 75 ? massIcon1 : item.value[iindex] < 115 ? massIcon2 : item.value[iindex] < 150 ? massIcon3 : item.value[iindex] < 250 ? massIcon4 : massIcon5;
                    let pointMarker = new AMap.Marker({
                        map: map,
                        position: iitem,
                        icon: massIcon,
                        zIndex: 99,
                        cursor: 'pointer',
                        extData: {
                            microdevCode: item.microdevCode,
                            value: item.value[iindex],
                            time: item.time[iindex],
                            pos: iitem
                        },
                    })

                    if (selectModel == 1) {
                        pointMarker.setLabel({
                            offset: new AMap.Pixel(2, 2),  //设置文本标注偏移量
                            content: item.value[iindex], //设置文本标注内容
                            direction: 'center'
                        });
                    }
                    pointMarker.on('click', showCirclePopus);
                    marker.push(pointMarker);
                })
                let start = item.path[1], end = item.path[0];
                let angle = start && end ? calcAngle(start, end) : 0;
                let car = new AMap.Marker({
                    map: map,
                    position: item.path[0],
                    icon: selectTab == 'bus' ? busIcon : posIcon,
                    offset: new AMap.Pixel(-26, -15),
                    autoRotation: true,
                    angle: selectTab == 'bus' ? angle : 0,
                    zIndex: 99,
                })
                if (selectTab == 'bus') {
                    car.setLabel({
                        offset: new AMap.Pixel(10, -20),
                        content: `<div class='info'>${getBusName(item.microdevCode)}</div>`,
                    })
                }
                cars.push(car)
            })
            setCarSite(cars);
            setRealMarkers(marker);
            setLoad(false)
        }
    }
    // 绘制小车
    const drawCar = () => {
        let cars = [];
        if (emptyCar.length) {
            emptyCar.map(item => {
                let car = new AMap.Marker({
                    map: map,
                    position: item.pos,
                    icon: selectTab == 'bus' ? busIcon : posIcon,
                    offset: new AMap.Pixel(-26, -15),
                    autoRotation: true,
                    zIndex: 99
                });
                if (selectTab == 'bus') {
                    car.setLabel({
                        offset: new AMap.Pixel(10, -20),
                        content: `<div class='info'>${getBusName(item.microdevCode)}</div>`,
                    })
                }
                cars.push(car);
            })
        }
        setCarPosition(cars);
    }
    // 绘制 公交车历史彩虹图
    const drawBusHistoryRainbow = () => {
        setLoad(true)
        if (!busTraceType) {
            setRealFlag(!realFlag);
        }
        if (historyPath.length && busTraceType) {
            let markers = [];
            historyPath.map(item => {
                item.path.map((iitem, iindex) => {
                    let color = item.value[iindex] < 35 ? '#3dcc34' : item.value[iindex] < 75 ? '#eee61b' : item.value[iindex] < 115 ? '#fe8000' : item.value[iindex] < 150 ? '#e50112' : item.value[iindex] < 250 ? '#ab0a4e' : '#87070c';
                    if (iindex > 0) {
                        let polyline = new AMap.Polyline({
                            // map: map,
                            path: [item.path[iindex - 1], iitem],
                            showDir: true,
                            strokeColor: color, // 线颜色
                            strokeOpacity: 0.8, // 线透明度
                            strokeWeight: 10, // 线宽
                            lineJoin: "round",
                            lineCap: 'round',
                            cursor: 'pointer',
                            extData: {
                                path: [item.path[iindex - 1], iitem],
                                value: item.value[iindex],
                                microdevCode: item.microdevCode
                            },
                        })
                        polyline.on('click', showPointline);
                        markers.push(polyline);
                    }
                })

            })
            setHistoryMarker(markers);
        }
        setHisBusLayer(new AMap.LabelsLayer({
            // zoom: [3, 20],
            // collision: true
            collision: false
        }))
    }
    // 绘制 电动车历史彩虹图
    const drawElecHistoryRainbow = () => {
        setElecMassMarker(new AMap.MassMarks(elecPoint, {
            opacity: .9,
            style: style,
            zIndex: 111,
        }))
        setHisElecLayer(new AMap.LabelsLayer({
            collision: false
        }))
        setLoad(false)
    }
    // 绘制 20分钟之前的彩虹图
    const drawPrePath = () => {
        setLabelsLayer(new AMap.LabelsLayer({
            collision: false
        }))
        setMassMarker(new AMap.MassMarks(pointSet, {
            opacity: .9,
            style: style,
            zIndex: 111,
        }))
        setLoad(false);
    }
    // 绘制 实时路线 + 公交车
    const moveCar = () => {
        if (carSite && map) {
            map.remove(carSite);
        }
        let cars = [];
        let pathCircle = realMarkers;
        movePath.map((item, index) => {
            if (item.value.length) {
                let massIcon = item.value[0] < 35 ? massIcon0 : item.value[0] < 75 ? massIcon1 : item.value[0] < 115 ? massIcon2 : item.value[0] < 150 ? massIcon3 : item.value[0] < 250 ? massIcon4 : massIcon5;

                let pointMarker = new AMap.Marker({
                    map: map,
                    position: item.path[0],
                    icon: massIcon,
                    zIndex: 88,
                    cursor: 'pointer',
                    extData: {
                        microdevCode: item.microdevCode,
                        value: item.value[0],
                        pos: item.path[0],
                        time: item.time[0]
                    },

                })
                if (selectModel == 1) {
                    pointMarker.setLabel({
                        offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                        content: item.value[0], //设置文本标注内容
                    });
                }
                pointMarker.on('click', showCirclePopus);
                let start = item.path[1], end = item.path[0];
                let angle = start && end ? calcAngle(start, end) : 0;
                let car = new AMap.Marker({
                    map: map,
                    position: item.path[0],
                    icon: selectTab == 'bus' ? busIcon : posIcon,
                    offset: new AMap.Pixel(-13, -13, -13),
                    autoRotation: true,
                    angle: selectTab == 'bus' ? angle : 0,
                    zIndex: 99,
                })
                if (selectTab == 'bus') {
                    car.setLabel({
                        offset: new AMap.Pixel(10, -20),
                        content: `<div class='info'>${getBusName(item.microdevCode)}</div>`,
                    })
                }
                cars.push(car);
                pathCircle.push(pointMarker);
            }
        })
        setCarSite(cars);
        setRealMarkers(pathCircle);
    }
    // 绘制 报警 + 文字 + 报警图片
    const drawAlarmBar = (data) => {
        if (!busTraceType) {
            setAlarmFlag(!alarmFlag);
        }
        if (data.length) {
            let layers = layer;
            // 图层的容器和控制器
            let layer1 = new Loca.ScatterPointLayer({
                map: map,
            })
            layer1.setData(data, {
                lnglat: 'coord'
            });
            layer1.setOptions({
                // 设定棱柱体顶点数量, 默认 16，呈现圆柱体
                vertex: 4,
                // 单位米
                unit: 'meter',
                style: {
                    // 正多边形半径
                    radius: 60,
                    // height: 1000,
                    height: function (item) {
                        return item.value.value * 5;
                    },
                    // 顶边颜色
                    color: '#e50112',
                    opacity: 0.9,
                    // 旋转角度，单位弧度
                    rotate: Math.PI / 180 * 45
                },
                selectStyle: {
                    color: '#aabbcc',
                    opacity: 0.9
                },
            });
            // 文字 + gif
            let markers = alarmMarker;
            data.map(item => {
                let coord = item.coord.split(',')
                let text = new AMap.Text({
                    map: map,
                    text: item.value,
                    // verticalAlign: 'top',
                    position: [coord[0], coord[1]],
                    height: item.value * 35,
                    style: {
                        'background-color': 'transparent',
                        'text-align': 'center',
                        'border': 'none',
                        'color': '#fff',
                        'font-size': '1rem',
                        'font-weight': 600,
                        'font-family': 'Helvetica'
                    }
                });
                // 报警Gif
                let alarmGif = new AMap.Marker({
                    icon: alarmIcon,
                    position: [coord[0], coord[1]],
                    offset: new AMap.Pixel(-6, -12),
                    zIndex: 201,
                    extData: item,
                    map: map,
                    cursor: 'pointer',
                });
                markers.push(text, alarmGif);
                text.setMap(map);
                alarmGif.on('click', showAlarmPopus);
            })
            layer1.render();
            layers.push(layer1);
            setAlarmMarker(markers)
            setLayer(layers);
            setLoad(false)
        }
    }
    // 绘制 公交站点
    const drawBusStation = () => {
        if (station.length) {
            setLoad(true)
            let stations = [];
            let texts = [];
            station.map(item => {
                let busStation = new AMap.Marker({
                    map: map,
                    icon: stationIcon,
                    position: item.pos,
                    offset: new AMap.Pixel(-12, -12),
                    zIndex: 100,
                    extData: item,
                });
                let text = new AMap.Text({
                    // map: map,
                    text: item.staName,
                    position: item.pos,
                    anchor: 'middle-left',
                    style: {
                        'background-color': 'transparent',
                        'border': 'none',
                        'color': '#fff',
                        // 'color': '#A0ABC1',
                        'font-size': '0.75rem',
                        'font-weight': 800,
                        'font-family': 'Helvetica'
                    }
                });
                stations.push(busStation);
                texts.push(text);
            })
            setStationMarkers(stations);
            setText(texts);
        }
        setLoad(false)
    }

    // 报警弹窗
    const showAlarmPopus = (e) => {
        dispatch({ type: 'changeShowAlarmPopus', isShowAlarmPopus: !isShowAlarmPopus });
        dispatch({ type: 'changeAlarmInfo', alarmInfo: e.target.getExtData() });
    }
    // 各路线点弹窗
    const showCirclePopus = (e) => {
        setDetailType('real');
        setDetail(e.target.getExtData());
        setIsShowDetail(!isShowDetail);
    }
    const showHisCirclePopus = (e) => {
        setDetailType('his');
        setDetail(e.target.getExtData());
        setIsShowDetail(!isShowDetail);
    }
    const showMassPopus = (e) => {
        if (!busTraceType && selectTab == 'bus' || !elecTraceType && selectTab == 'elec') {
            setDetailType('real');
        } else if (busTraceType && selectTab == 'bus' || elecTraceType && selectTab == 'elec') {
            setDetailType('history')
        }
        setDetail(e.data);
        setIsShowDetail(!isShowDetail);
    }
    const showPointline = (e) => {
        setDetailType('history');
        setDetail(e.target.getExtData());
        setIsShowDetail(!isShowDetail);
    }


    //数据分组函数（每组2000条）
    const group = (data, num) => {
        var result = [];
        var groupItem;
        for (var i = 0; i < data.length; i++) {
            if (i % num == 0) {
                groupItem != null && result.push(groupItem);
                groupItem = [];
            }
            groupItem.push(data[i]);
        }
        result.push(groupItem);
        return result;
    }
    //分批加载
    const removePartMarkers = (group, index, fun) => {
        let module = fun == 'remove' ? null : map
        if (group) {
            for (let i = 0, len = group.length; i < len; i++) {
                group[i].setMap(module);
            }
        }
        //保证顺序不错乱
        while (index - currIndex == 1) {
            currIndex = index;
        }
    }
    const removeAllMarkers = (response, type, fun) => {
        let groups;
        if (type == 'history') {
            setLoad(true);
            groups = group(response, 50);
        } else {
            groups = group(response, 500);
        }
        for (var i = 0; i < groups.length; i++) {
            //闭包， 保持i值的正确性
            window.setTimeout(function () {
                var group = groups[i];
                var index = i + 1;
                if (fun == 'remove') {
                    return function () {
                        removePartMarkers(group, index, 'remove');
                        setLoad(false);
                    }
                } else {
                    return function () {
                        removePartMarkers(group, index, 'add');
                        setLoad(false);
                    }
                }
            }(), 1);
        }
    }

    // 清除上一次绘制
    const clearAll = () => {
        if (map) {
            // 清除历史路线
            if (historyMarker) {
                removeAllMarkers(historyMarker, 'history', 'remove');
                setHistoryMarker([]);
                currIndex = 0;
            }
            // 清除实时路线
            if (realMarkers) {
                removeAllMarkers(realMarkers, 'real', 'remove');
                setHistoryMarker([]);
                currIndex = 0;
            }
            // 清除海量点
            if (massMarker) {
                massMarker.clear();
            }
            // 清除海量点
            if (elecMassMarker) {
                elecMassMarker.clear();
            }
            // 清除海量点+文本标注
            if (labelsLayer) {
                labelsLayer.clear();
            }
            // 清除电动车历史海量点+文本标注
            if (hisElecLayer) {
                hisElecLayer.clear();
            }
            // 清除公交车历史海量点+文本标注
            if (hisBusLayer) {
                hisBusLayer.clear();
            }
            // 清除公交车
            if (carSite) {
                map.remove(carSite);
            }
            // 清除bus
            if (carPosition) {
                map.remove(carPosition);
            }
            clearAlarmMarker();
        }
    }
    const clearAlarmMarker = () => {
        // 清除报警GIF + 文字
        if (alarmMarker) {
            removeAllMarkers(alarmMarker, 'real', 'remove');
            setAlarmMarker([]);
            currIndex = 0;
        }
        // 清除柱子
        if (layer) {
            layer.map(item => {
                item.setMap(null);
            })
        }
    }

    // 监听地图缩放
    const listen = () => {
        if (map) {
            map.on("zoomchange", function () {
                let zoom = map.getZoom();
                if (text && isShowStation) {
                    if (zoom >= 15) {
                        text.map(item => {
                            item.setMap(map);
                        })
                    } else {
                        text.map(item => {
                            item.setMap(null);
                        })
                    }
                }
                if (massMarker) {
                    if (zoom >= 18.5) {
                        let newStyle = handleStyle(zoom * 1.7)
                        massMarker.setStyle(newStyle);
                    } else if (zoom >= 17.5) {
                        let newStyle = handleStyle(zoom * 1.6)
                        massMarker.setStyle(newStyle);
                    } else if (zoom >= 16.5) {
                        let newStyle = handleStyle(zoom * 1.5)
                        massMarker.setStyle(newStyle);
                    } else if (zoom >= 15.5) {
                        let newStyle = handleStyle(zoom * 1.4)
                        massMarker.setStyle(newStyle);
                    } else if (zoom >= 14.5) {
                        let newStyle = handleStyle(zoom * 1.3)
                        massMarker.setStyle(newStyle);
                    } else {
                        let newStyle = handleStyle(zoom * 1.2)
                        massMarker.setStyle(newStyle);
                    }
                }
            })
        }
    }

    // 处理样式
    const handleStyleNum = (val) => {
        let num = val == undefined ? 0 : val < 35 ? 0 : val < 75 ? 1 : val < 115 ? 2 : val < 150 ? 3 : val < 250 ? 4 : 5;
        return num;
    }
    // 处理海量点样式
    const handleStyle = (num) => {
        return [
            {
                url: mass0,
                anchor: new AMap.Pixel(6, 6),
                size: new AMap.Size(num, num)
            }, {
                url: mass1,
                anchor: new AMap.Pixel(6, 6),
                size: new AMap.Size(num, num)
            }, {
                url: mass2,
                anchor: new AMap.Pixel(6, 6),
                size: new AMap.Size(num, num)
            }, {
                url: mass3,
                anchor: new AMap.Pixel(6, 6),
                size: new AMap.Size(num, num)
            }, {
                url: mass4,
                anchor: new AMap.Pixel(6, 6),
                size: new AMap.Size(num, num)
            }, {
                url: mass5,
                anchor: new AMap.Pixel(6, 6),
                size: new AMap.Size(num, num)
            },
        ]
    }
    // 获取设备对应的公交路线
    const getBusName = (dev) => {
        let name;
        switch (dev) {
            case 'SAQG1D30PP00002180':
            case 'SAQG1D30PP00002167':
                name = 11;
                break;
            case 'SAQG1D30PP00002075':
            case 'SAQG1D30PP00002170':
                name = 12;
                break;
            case 'SAQG1D30PP00002128':
                name = 18;
                break;
            case 'SAQG1D30PP00002145':
            case 'SAQG1D30PP00002095':
                name = 303;
                break;
            case 'SAQG1D30PP00002187':
            case 'SAQG1D30PP00002071':
                name = 30;
                break;
            case 'SAQG1D30PP00002080':
            case 'SAQG1D30PP00002089':
                name = 56;
                break;
            case 'SAQG1D30PP00002171':
            case 'SAQG1D30PP00002182':
                name = 67;
                break;
            case 'SAQG1D30PP00002160':
            case 'SAQG1D30PP00002169':
                name = 6;
                break;

        }
        return name;
    }
    // 计算两点间的角度 => 小车车头角度根据路线进行偏移
    const calcAngle = (start, end) => {
        var p_start = map.lngLatToContainer(start),
            p_end = map.lngLatToContainer(end);
        var diff_x = p_end.x - p_start.x,
            diff_y = p_end.y - p_start.y;
        return 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI);
    }

    // 测试
    const lnglat2pixel = (map, pos) => {
        var lnglat = new AMap.LngLat(pos[0], pos[1]);
        var pixel = map.lngLatToGeodeticCoord(lnglat);
        return pixel
    }
    const changePixel = (map, arr) => {
        let newArr = [];
        if (arr.length) {
            arr.map(item => {
                newArr.push(lnglat2pixel(map, item))
            })
        }
        return newArr
    }
    const drawWall = () => {
        let { path, value, color } = wall
        let newWall = changePixel(map, path);
        newWall.map((item, index) => {
            let exm = new AMap.Object3D.Wall({
                path: [newWall[index], newWall[index + 1]],
                // height: 3000,
                height: value[index] * 20,
                color: color[index],
                cursor: 'pointer'
            });
            console.log(exm);
            // exm.on('click',function (e){
            //     console.log(e);
            // })
            exm.backOrFront = 'both';
            exm.transparent = true;
            object3Dlayer.add(exm);
        })

    }

    useEffect(() => {
        initMap();
        getData();
        setTimeout(() => {
            getPreData();
        }, 200)
    }, [])

    useEffect(() => {
        drawBoundry();
    }, [map])

    // 测试
    useEffect(() => {
        if (Object.keys(wall).length) {
            drawWall();
        }
    }, [wall])
    // 测试
    useEffect(() => {
        if (map) {
            map.add(object3Dlayer);
        }
    }, [object3Dlayer])

    /* useEffect(() => {
        drawCar();
    }, [emptyCar])

    useEffect(() => {
        setIsClickTimeBar(false);
    }, [hETime, hSTime])

    useEffect(() => {
        listen();
    }, [map, text, massMarker])

    useEffect(() => {
        if (map) {
            map.remove(stationMarkers);
            map.remove(text);
            setStationMarkers([]);
            setText([]);
        }
        getBusStation();
    }, [isShowStation, bus])

    useEffect(() => {
        drawBusStation();
    }, [station])

    useEffect(() => {
        drawRealRainbow();
    }, [realPath])

    useEffect(() => {
        drawBusHistoryRainbow();
    }, [historyPath])
    useEffect(() => {
        if (busTraceType && historyMarker.length) {
            removeAllMarkers(historyMarker, 'history', 'add');
        }
    }, [historyMarker])
    useEffect(() => {
        if (busTraceType && hisBusLayer && selectModel == 1) {
            map.add(hisBusLayer);
            hisBusLayer.add(hisBusPoint);
            hisBusLayer.on('complete', function (e) {
                console.log(e);
            })
        } else if (busTraceType && hisBusLayer && selectModel == 0) {
            hisBusLayer.clear();
        }
    }, [hisBusLayer, selectModel])

    // 20分钟前海量点图层
    useEffect(() => {
        drawPrePath();
    }, [pointSet])
    useEffect(() => {
        let flag1 = massMarker && selectModel == 0 && (!busTraceType && selectTab == 'bus' || !elecTraceType && selectTab == 'elec');
        let flag2 = labelsLayer && selectModel == 1 && (!busTraceType && selectTab == 'bus' || !elecTraceType && selectTab == 'elec');
        if (flag1) {
            if (labelsLayer) {
                labelsLayer.hide();
            }
            massMarker.setMap(map);
            massMarker.show();
            massMarker.on('click', showMassPopus);
        }
        if (flag2) {
            if (massMarker) {
                massMarker.hide();
            }
            map.add(labelsLayer);
            if (labelPoint) {
                map.add(labelsLayer);
                labelsLayer.add(labelPoint)
                labelsLayer.show();
            }
        }
    }, [massMarker, labelsLayer, selectModel])
    useEffect(() => {
        if (selectModel == 1) {
            let flag = realMarkers && (!busTraceType && selectTab == 'bus' || !elecTraceType && selectTab == 'elec');
            if (flag) {
                realMarkers.map(item => {
                    let data = item.getExtData()
                    item.setLabel({
                        offset: new AMap.Pixel(2, 2),  //设置文本标注偏移量
                        content: data.value, //设置文本标注内容
                    });
                })
            }
        } else {
            if (realMarkers) {
                realMarkers.map(item => {
                    item.setLabel({
                        content: '', //设置文本标注内容
                    });
                })
            }
        }
    }, [selectModel])
    // 电动车历史海量点图层
    useEffect(() => {
        drawElecHistoryRainbow();
    }, [elecPoint])
    useEffect(() => {
        if (selectModel == 0 && elecMassMarker && selectTab == 'elec') {
            if (hisElecLayer) {
                hisElecLayer.hide();
            }
            elecMassMarker.setMap(map);
            elecMassMarker.on('click', showMassPopus);
            elecMassMarker.show();
        } else if (selectModel == 1 && hisElecLayer && selectTab == 'elec') {
            if (elecMassMarker) {
                elecMassMarker.hide();
            }
            map.add(hisElecLayer);
            hisElecLayer.add(hisElecPoint)
            hisElecLayer.show();
        }
    }, [elecMassMarker, hisElecLayer, selectModel])

    useEffect(() => {
        if (map) {
            clearInterval(timer);
            clearAll();
            if (!isClickTimeBar) {
                if (busTraceType) {
                    getData();
                } else {
                    getData();
                    setTimeout(() => {
                        getPreData();
                    }, 200)
                }
                getAlarmData();
            } else {
                if (busTraceType) {
                    getData();
                } else {
                    if (new Date(tbETime) > new Date()) {
                        getData();
                    }
                    getPreData();
                }
                getAlarmData();
            }
        }
    }, [busPollutantId, busPollutant])
    useEffect(() => {
        if (map) {
            clearInterval(timer);
            clearAll();
            if (!isClickTimeBar) {
                if (elecTraceType) {
                    getData();
                } else {
                    getData();
                    setTimeout(() => {
                        getPreData();
                    }, 200)
                }
                getAlarmData();
            } else {
                if (elecTraceType) {
                    getData();
                } else {
                    if (new Date(tbETime) > new Date()) {
                        getData();
                    }
                    getPreData();
                }
            }
        }
    }, [elecPollutantId, elecPollutant])

    useEffect(() => {
        clearAlarmMarker();
        clearInterval(alarmTimer);
        getAlarmData();
    }, [isShowAlarm, alarmPollutant, microdevCode, hMicrodevCode])

    useEffect(() => {
        drawAlarmBar(barSite);
    }, [barSite])

    useEffect(() => {
        drawAlarmBar(newBar);
    }, [newBar])


    useEffect(() => {
        if (map) {
            clearInterval(timer);
            clearInterval(alarmTimer);
            clearAll();
            if (!isClickTimeBar) {
                getData();
                setTimeout(() => {
                    getPreData();
                }, 200)
                getAlarmData();
            } else {
                getPreData();
            }
            if (selectTab == 'elec') {
                map.remove(stationMarkers);
            } else if (isShowStation) {
                map.add(stationMarkers);
            }
        }
    }, [isShowReal])

    useEffect(() => {
        if (map) {
            clearInterval(timer);
            clearInterval(alarmTimer);
            clearAll();
            map.remove(stationMarkers);
            map.remove(text);
            getData();
            getAlarmData();

            if (selectTab == 'elec') {
                map.remove(stationMarkers);
            } else if (isShowStation) {
                map.add(stationMarkers);
            }
        }
    }, [isShowHistory])

    useEffect(() => {
        timer = setInterval(() => {
            getIntervalData();
        }, 30 * 1000)
        return () => clearInterval(timer);
    }, [realFlag])

    useEffect(() => {
        alarmTimer = setInterval(() => {
            getIntervalAlarmData();
        }, 10 * 60 * 1000)
        return () => clearInterval(alarmTimer);
    }, [alarmFlag])

    useEffect(() => {
        moveCar();
    }, [movePath])

    useEffect(() => {
        if (map && isClickTimeBar) {
            clearInterval(timer);
            clearInterval(alarmTimer);
            clearAll();
            if (busTraceType && selectTab == 'bus' || elecTraceType && selectTab == 'elec') {
                getData();
                getAlarmData();
            } else {
                if (new Date(tbETime) > new Date()) {
                    getData();
                }
                getPreData();
                getAlarmData();
            }
        }
    }, [isClickTimeBar, tbETime])
    // timeBar点击触发的事件
    useEffect(() => {
        if (map && !isClickTimeBar) {
            clearAll();
            setFresh(fresh + 1);
        }
    }, [isClickTimeBar])
    // timeBar刷新
    useEffect(() => {
        if (map && fresh >= 2) {
            if (busTraceType || elecTraceType) {
                getData();
                getAlarmData();
            } else {
                getData();
                getPreData();
                getAlarmData();
            }
        }
    }, [fresh]) */
    return <>
        <Spin spinning={load} />
        <div id="map"></div>
        <AlarmPopus alarmInfo={alarmInfo}></AlarmPopus>
        <DetailPopus
            detailType={detailType}
            detail={detail}
            selectTab={selectTab}
            isShowDetail={isShowDetail}
            setIsShowDetail={setIsShowDetail}
            busPollutant={busPollutant}></DetailPopus>
        <TimeBar
            isClickTimeBar={isClickTimeBar}
            setTbETime={setTbETime}
            setIsClickTimeBar={setIsClickTimeBar}
            setSelectModel={setSelectModel}
            setLoad={setLoad}
        ></TimeBar>
    </>
}

export default busMonitor;